document.addEventListener('DOMContentLoaded', function() {
    // 获取DOM元素
    const uploadImageBtn = document.getElementById('uploadImage');
    const removeImageBtn = document.getElementById('removeImage');
    const imageInput = document.getElementById('imageInput');
    const imageSettings = document.getElementById('imageSettings');
    const imagePreview = document.getElementById('imagePreview').querySelector('img');
    const icoSizeSlider = document.getElementById('icoSize');
    const icoSizeValue = document.getElementById('icoSizeValue');
    const icoRadiusSlider = document.getElementById('icoRadius');
    const icoRadiusValue = document.getElementById('icoRadiusValue');
    const downloadIcoBtn = document.getElementById('downloadIco');
    const resetSettingsBtn = document.getElementById('resetSettings');
    const previewCanvas = document.getElementById('previewCanvas');
    const previewPlaceholder = document.getElementById('previewPlaceholder');
    const presetSizeButtons = document.querySelectorAll('.preset-size');
    const presetRadiusButtons = document.querySelectorAll('.preset-radius');

    // 初始化Feather图标
    feather.replace();

    // 当前上传的图片
    let currentImage = null;

    // 初始化设置
    let settings = {
        size: 64,
        radius: 0
    };

    // 更新预览
    function updatePreview() {
        if (!currentImage) return;

        const ctx = previewCanvas.getContext('2d');
        const size = settings.size;
        const radius = (settings.radius / 100) * (size / 2); // 根据百分比计算圆角半径

        // 设置画布尺寸
        previewCanvas.width = size;
        previewCanvas.height = size;

        // 清除画布
        ctx.clearRect(0, 0, size, size);

        // 创建圆角矩形路径
        ctx.beginPath();
        ctx.moveTo(radius, 0);
        ctx.lineTo(size - radius, 0);
        ctx.quadraticCurveTo(size, 0, size, radius);
        ctx.lineTo(size, size - radius);
        ctx.quadraticCurveTo(size, size, size - radius, size);
        ctx.lineTo(radius, size);
        ctx.quadraticCurveTo(0, size, 0, size - radius);
        ctx.lineTo(0, radius);
        ctx.quadraticCurveTo(0, 0, radius, 0);
        ctx.closePath();

        // 裁剪为圆角矩形
        ctx.clip();

        // 绘制图像
        ctx.drawImage(currentImage, 0, 0, size, size);

        // 显示预览
        previewPlaceholder.classList.add('hidden');
        previewCanvas.classList.remove('hidden');
        downloadIcoBtn.disabled = false;
    }

    // 上传图片按钮点击事件
    uploadImageBtn.addEventListener('click', function() {
        imageInput.click();
    });

    // 图片输入变化事件
    imageInput.addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            const file = e.target.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                // 创建新图像对象
                currentImage = new Image();
                currentImage.onload = function() {
                    // 显示图片预览
                    imagePreview.src = currentImage.src;
                    imageSettings.classList.remove('hidden');
                    removeImageBtn.classList.remove('hidden');
                    
                    // 更新预览
                    updatePreview();
                };
                currentImage.src = e.target.result;
            };

            reader.readAsDataURL(file);
        }
    });

    // 移除图片按钮点击事件
    removeImageBtn.addEventListener('click', function() {
        currentImage = null;
        imageInput.value = '';
        imagePreview.src = '';
        imageSettings.classList.add('hidden');
        removeImageBtn.classList.add('hidden');
        previewCanvas.classList.add('hidden');
        previewPlaceholder.classList.remove('hidden');
        downloadIcoBtn.disabled = true;
    });

    // 尺寸滑块变化事件
    icoSizeSlider.addEventListener('input', function() {
        settings.size = parseInt(this.value);
        icoSizeValue.textContent = settings.size;
        updatePreview();
    });

    // 圆角滑块变化事件
    icoRadiusSlider.addEventListener('input', function() {
        settings.radius = parseInt(this.value);
        icoRadiusValue.textContent = settings.radius + '%';
        updatePreview();
    });

    // 预设尺寸按钮点击事件
    presetSizeButtons.forEach(button => {
        button.addEventListener('click', function() {
            const size = parseInt(this.getAttribute('data-size'));
            settings.size = size;
            icoSizeSlider.value = size;
            icoSizeValue.textContent = size;
            updatePreview();
        });
    });

    // 预设圆角按钮点击事件
    presetRadiusButtons.forEach(button => {
        button.addEventListener('click', function() {
            const radius = parseInt(this.getAttribute('data-radius'));
            settings.radius = radius;
            icoRadiusSlider.value = radius;
            icoRadiusValue.textContent = radius + '%';
            updatePreview();
        });
    });

    // 下载ICO图标按钮点击事件
    downloadIcoBtn.addEventListener('click', function() {
        if (!currentImage) return;

        // 使用canvas.toBlob生成PNG图像
        previewCanvas.toBlob(function(blob) {
            // 创建下载链接
            const link = document.createElement('a');
            link.download = `icon-${settings.size}x${settings.size}.ico`;
            link.href = URL.createObjectURL(blob);
            link.click();
            
            // 释放URL对象
            setTimeout(() => URL.revokeObjectURL(link.href), 100);
        }, 'image/png');
    });

    // 重置设置按钮点击事件
    resetSettingsBtn.addEventListener('click', function() {
        settings.size = 64;
        settings.radius = 0;
        icoSizeSlider.value = settings.size;
        icoSizeValue.textContent = settings.size;
        icoRadiusSlider.value = settings.radius;
        icoRadiusValue.textContent = settings.radius + '%';
        
        if (currentImage) {
            updatePreview();
        }
    });
});